<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="All Rights Reserved, Copyright (C) 2013, Wuyeguo, Ltd." />
<title>EasyUI Web Admin Power by Wuyeguo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../css/wu.css" />
<link rel="stylesheet" type="text/css" href="../css/icon.css" />
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../src/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../jquery.serializejson.min.js"></script>
<script type="text/javascript" src="../src/xheditor/xheditor-1.2.2.min.js"></script>
<script type="text/javascript" src="../src/xheditor/xheditor_lang/zh-cn.js"></script>
</head>
<body>
<div id="user-toolbar">
    <div class="wu-toolbar-button">
    	        <a href="#" class="easyui-linkbutton" iconCls="icon-search" style="width:80px">Search</a>

        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openUserAdd()" plain="true">添加</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openUserEdit()" plain="true">修改</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="userRemove()" plain="true">删除</a>

    </div>
</div>

<!-- form表单 -->
<table id="user-datagrid" toolbar="#user-toolbar"></table>
<!-- 弹窗+用户表单 -->
<div id="user-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
	 <form id="user-form" class="easyui-form" method="post" data-options="novalidate:true">
	    <div style="margin-bottom:20px">
	        <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
	    </div>
	    <div style="margin-bottom:20px">
	        <input class="easyui-textbox" name="password" style="width:100%" data-options="label:'Password:',required:true">
	    </div>
	    <div style="margin-bottom:20px">
	        <input class="easyui-textbox" name="email" style="width:100%" data-options="label:'Email:',required:true,validType:'email'">
	    </div>
	    
	</form>
</div>



<script type="text/javascript">

	/*载入数据*/
	$('#user-datagrid').datagrid({
	    url:'http://localhost:3000/users/list',
	    fit:true,
	    // pageSize:10,
	    // pageList:[10,20,30,40,50],
	    // pagination:true,
	    loadFilter:pagerFilter,		
		rownumbers:true,
		singleSelect:false,
		pageSize:10,           
		pagination:true,
		multiSort:true,
		fitColumns:true,
	    columns:[[
	        {field:'name',title:'姓名',width:100},
	        {field:'password',title:'密码',width:100},
	        {field:'email',title:'邮箱',width:100,align:'right'},
	        {field:'operate',title:'管理', width:120,
			formatter: function(value,row,index){
				var str='<a href="javascript:void(0)"  name="edit" class="easyui-linkbutton" onclick="editUser(\''+ row._id+'\')">'+
				 '<a href="javascript:void(0)"  name="dele" class="easyui-linkbutton" onclick="deleUser(\''+ row._id+'\')">'
				return str;
			}
		}
	    ]],
	    onLoadSuccess:function(data){
           $("a[name='edit']").linkbutton({text:'修改',plain:true,iconCls:'icon-edit'});
           $("a[name='dele']").linkbutton({text:'删除',plain:true,iconCls:'icon-remove'});
        }
	});
	function pagerFilter(data){//分页插件            
		if (typeof data.length == 'number' && typeof data.splice == 'function'){// is array                
			data = {                   
				total: data.length,                   
				rows: data               
			}            
		}        
		var dg = $(this);         
		var opts = dg.datagrid('options');          
		var pager = dg.datagrid('getPager');          
		pager.pagination({                
			onSelectPage:function(pageNum, pageSize){                 
				opts.pageNumber = pageNum;                   
				opts.pageSize = pageSize;                
				pager.pagination('refresh',{pageNumber:pageNum,pageSize:pageSize});                  
				dg.datagrid('loadData',data);                
			}          
		});           
		if (!data.originalRows){               
			data.originalRows = (data.rows);       
		}         
		var start = (opts.pageNumber-1)*parseInt(opts.pageSize);          
		var end = start + parseInt(opts.pageSize);        
		data.rows = (data.originalRows.slice(start, end));         
		return data;       
	}


	/*像表单中添加数据*/
	function openUserAdd(){
		$('#user-form').form('clear');
		$("#user-dialog").dialog({
			closed: false,
			modal:true,
            title: "添加信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: userAddAction
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#user-dialog').dialog('close');                    
                }
            }]
        });
	}
	/*添加数据按钮函数*/
	function userAddAction(){
		 $('#user-form').form('submit',{
	        onSubmit:function(){
	            if ($(this).form('enableValidation').form('validate')){
					$.ajax({
						type:"post",
						url:"http://localhost:3000/users/data",
						data:$("#user-form").serializeJSON()
					}).then(function(res){
						$('#user-dialog').dialog('close');
						$('#user-datagrid').datagrid('reload');
					});
					
					
	            }else{
	            	alert('no')
	            }
	        }
	    });
	}
	/*删除单行数据*/
	function deleUser(id){
		$.ajax({
			type:"delete",
			url:"http://localhost:3000/users/data/"+ id
		}).then(function(res){		
			$('#user-datagrid').datagrid('reload');
		});
	}
	function userRemove(){
		var obj=$('#user-datagrid').datagrid('getSelected');
		if(obj){
			var http="http://localhost:3000/users/data/"+obj._id;
			$.ajax({
				type:"delete",
				url:http
			}).then(function(res){		
				$('#user-datagrid').datagrid('reload');
			});
		}else{
			alert('请选中表单修改内容！')
		}
	}


	/*编辑修改数据*/
	function editUser(id){
		var http="http://localhost:3000/users/data/"+ id;
		edit(http);
	}
	/*编辑通过地址进行修改*/
	function edit(http){
			$.ajax({
			type:"post",
			url:http
	}).then(function(res){	
		$('#user-form').form('load',res);/*导入数据到表单中*/
		$("#user-dialog").dialog({
		closed: false,
		modal:true,
        title: "添加信息",
        buttons: [{
            text: '确定',
            iconCls: 'icon-ok',
            handler: function(){
            	$('#user-form').form('submit',{/*提交修改后的数据*/
			        onSubmit:function(){
			            if ($(this).form('enableValidation').form('validate')){
							$.ajax({
								type:"post",
								url:http,
								data:$("#user-form").serializeJSON()
							}).then(function(res){
								$('#user-dialog').dialog('close');
								$('#user-datagrid').datagrid('reload');
							});
			            }
			        }
			    });
            }
        }, {
            text: '取消',
            iconCls: 'icon-cancel',
            handler: function () {
                $('#user-dialog').dialog('close');                    
            }
        }]
    });
		});	
	}


	/*上方选中后进行编辑*/
	function openUserEdit(){
		var obj=$('#user-datagrid').datagrid('getSelected');
		if(obj){
			var http="http://localhost:3000/users/data/"+obj._id;
			edit(http);
		}else{
			alert('请选中表单修改内容！')
		}
	}
</script>
</body>
</html>


